import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route, Routes, NavLink, Navigate } from 'react-router-dom'
import Login from './pages/Login'
import './App.css'
import Index from './pages/Index';
import Home from './pages/Home';
import NotFount from './pages/NotFount';
import VisitorList from './pages/visitors/VisitorList';
import VisitorAdd from './pages/visitors/VistitorAdd';

class App extends Component {
  state = {
    count: 0
  }
  handleCount = () => {
    //  this.setState({
    //    count: this.state.count + 1
    //  })
    
      // this.setState((state) => {
      //   console.log('state', state)
      //    return {
      //     count: state.count + 1
      //    }
      // })
      
      // this.setState((state) => ({count: state.count + 1}))
      
      // 第二个参数
       this.setState((state) => {
        // console.log('state', state)
         return {
          count: state.count + 1
         }
      }, () => {
        if (this.state.count >= 5) {
         console.log('count状态已更新完毕-count>=5', this.state.count)
        }
      })
    /*
    * setState 第一个参数为对象的时候，直接更改状态
    * setState 第一个参数函数的时候，可以通过参数修改状态
    * setState 第二个参数，是一个回调函数，代表状态更新完毕后执行的callback
    */
  }
  render() {
     console.log('this', this)
    return (<>
       <h2>知识点回顾setState用法</h2>
       count: {this.state.count}
       <button onClick={this.handleCount}>count++</button>
      <h2>13.路由(yarn add react-router-dom)</h2>
      <Router>
        <nav>
          <h3>13.1导航：Link</h3>
          {/*  to等于字符串方式 */}
          {/* <Link to='/home'>首頁</Link> &nbsp;|&nbsp;
           <Link to='/login'>登录</Link> */}
          {/* <a href='/home'>首页</a>
           <a href='/login'>登录</a> */}
          {/* to以对象方式跳转 */}
          <h4>to属性</h4>

          <Link to={{
            pathname: '/home',
            search: '?id=100',
            hash: '#the-hash',
            state: {
              name: 'zhangsan'
            }
          }}>首页</Link>
          <hr />
          <h3>13.2 导航：NavLink-Link的特定版本，可以设置激活状态</h3>
          {/* NavLink */}
          <h3> 1. 设置style行内样式</h3>
          <NavLink to='/login' style={({ isActive }) => {
            return {
              color: isActive ? 'red' : 'pink'
            }
          }}>登录</NavLink> &nbsp;|&nbsp;<NavLink style={({ isActive }) => {
            return {
              color: isActive ? 'red' : 'pink'
            }
          }} to='/home'>首頁</NavLink>
          {/* clasName */}
          <h3>2. 动态设置className的方式</h3>
          {/* <NavLink className={({isActive}) => isActive ? 'current' : 'pending' } to='/home'>首頁</NavLink> &nbsp;|&nbsp;
          <NavLink className={({isActive}) => isActive ? 'current' : 'pending' } to='/login'>登录页面</NavLink> 
            */}
          <h3>3. 新版本可直接把激活导航的class=active写在样式表里-控制激活状态</h3> 
          <NavLink to='/home'>首頁</NavLink> &nbsp;|&nbsp;
          <NavLink to='/login'>登录页面</NavLink>
          
          <h2>13.3 页面重定向</h2>
          {/* <Redirect /> 老版本*/}
           <h3>Navigate</h3>
           {/* <Route path='/'  element={<Navigate to='/index' replace />}></Route>  */}
          <h2> 13.4 嵌套路由</h2>
                  

        </nav>
        <Routes>
          <Route path='/index' element={<Index />}>
               {/* 绝对路径 */}
              {/* <Route path='/index/visitorList' element={<VisitorList />}></Route>
              <Route path='/index/visitorAdd' element={<VisitorList />}></Route> */}
              {/* 相对路径 */}
              {/* 默认子路由 index属性的方式，但是path属性要删掉，否则不生效 */}
              <Route index element={<Home />}></Route>
              <Route path='home' element={<Home />}></Route>
              {/* 默认子路由 path为空 */}
              {/* <Route path='' element={<Home />}></Route> */}
              <Route path='visitorList' element={<VisitorList />}></Route>
              <Route path='visitorAdd' element={<VisitorAdd />}></Route>
          </Route>
          {/* <Route path='/' element={<Navigate to='/index' replace />} /> */}
          {/* <Route path='/' element={<Index />} /> */}
          {/* 
            路由跳转： push->    有历史记录
                       replace -> 没有历史记录
          */}
          
          {/* 默认都是精确匹配 */}
          <Route path='/login' element={<Login />} />
          {/* <Route path='/list/:id' element={<VisitorList />} /> */}
          {/* <Route path='/list/:id/haha' element={<VisitorList />} /> */}
          {
          
          // <Route path='/list/*/haha' element={<VisitorList />} />
          }
          {/* 模糊匹配 */}
          {/* <Route path='/list/*' element={<VisitorList />} /> */}
          {/* <Route path='/home1' element={<Home />}></Route> */}
          <Route path='*' element={<NotFount />} />
        </Routes>
      </Router>

    </>
    );
  }
}


export default App;
